<template>
	<view>
		<!-- 搜索导航 -->
		<SearchNav></SearchNav>
		<!-- 轮播图 -->
		<view class="banner">
			<swiper indicator-dots indicator-active-color="#1baeae">
				<swiper-item v-for="item in banners" :key="item.carouselUrl" @click="goPage(item)"><image :src="item.carouselUrl"></image></swiper-item>
			</swiper>
		</view>

		<!-- 分类导航 -->
		<view class="cate-list">
			<view class="cate-item" v-for="item in categoryData" :key="item.categoryId" @click="showTip">
				<image :src="item.imgUrl" mode=""></image>
				<text>{{ item.name }}</text>
			</view>
		</view>

		<!-- 新品上线 -->
		<view class="good">
			<view class="good-header">新品上线</view>
			<!-- 骨架屏 -->
			<van-skeleton :row="4" :loading="loading" class="good-skeleton">
				<view class="good-box">
					<view class="good-item" v-for="item in news" :key="item.goodsId" @click="goGoods(item.goodsId)">
						<image :src="item.goodsCoverImg"></image>
						<view class="good-desc">
							<view class="title">{{ item.goodsName }}</view>
							<view class="price">¥ {{ item.sellingPrice }}</view>
						</view>
					</view>
				</view>
			</van-skeleton>
		</view>

		<!-- 热门商品 -->
		<view class="good">
			<view class="good-header">热门商品</view>
			<!-- 骨架屏 -->
			<van-skeleton :row="4" :loading="loading" class="good-skeleton">
				<view class="good-box">
					<view class="good-item" v-for="item in hots" :key="item.goodsId" @click="goGoods(item.goodsId)">
						<image :src="item.goodsCoverImg"></image>
						<view class="good-desc">
							<view class="title">{{ item.goodsName }}</view>
							<view class="price">¥ {{ item.sellingPrice }}</view>
						</view>
					</view>
				</view>
			</van-skeleton>
		</view>

		<!-- 最新推荐 -->
		<view class="good">
			<view class="good-header">最新推荐</view>
			<!-- 骨架屏 -->
			<van-skeleton :row="4" :loading="loading" class="good-skeleton">
				<view class="good-box">
					<view class="good-item" v-for="item in recommeds" :key="item.goodsId" @click="goGoods(item.goodsId)">
						<image :src="item.goodsCoverImg"></image>
						<view class="good-desc">
							<view class="title">{{ item.goodsName }}</view>
							<view class="price">¥ {{ item.sellingPrice }}</view>
						</view>
					</view>
				</view>
			</van-skeleton>
		</view>
	</view>
</template>

<script setup>
import { categoryData } from '@/utils/type_data.js'
import { onShow } from '@dcloudio/uni-app'
import { onMounted, reactive, toRefs } from 'vue'
import { getHome } from '../../api/modules/home'
import SearchNav from '../../components/SearchNav/SearchNav.vue';
// import { ShopStore } from '../../store/shop';
// const shopStore = ShopStore()

// 下载vantUI组件库  npm i @vant/weapp
// 开发小程序 推荐将主级页面【tabBar】首屏加载（主包）  次级页面按需加载（次包） 

const state = reactive({
	banners: [],
	news: [],
	hots: [],
	recommeds: [],
	loading: true
})

onMounted(async () => {
	// 1. 显示加载
	uni.showLoading({ title: '加载中...', mask: true })
	// 2. 加载数据
	const { data, resultCode } = await getHome()
	state.banners = data.carousels
	state.news = data.newGoodses
	state.hots = data.hotGoodses
	state.recommeds = data.recommendGoodses
	state.loading = false
})

// * 显示提示
const showTip = () => {
	uni.showToast({
		title: '敬请期待',
		icon: 'none'
	})
}

// * 跳转商品详情
const goGoods = (id) => {
	uni.navigateTo({
		url: '/subpkg/goods-detail/goods-detail?goodsId=' + id
	})
}

// * 轮播图跳页面
const goPage = (item) => {
	if (!item.redirectUrl) return
	uni.navigateTo({ url: item.redirectUrl })
}

// onShow(() => {
// 	shopStore.updateList()
// })

const { banners, hots, news, recommeds, loading } = toRefs(state)
</script>

<style lang="scss">
.banner {
	height: 340rpx;
	swiper,
	image {
		width: 100%;
		height: 100%;
	}
}

.cate-list {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20rpx;
	.cate-item {
		width: 20%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-top: 20rpx;
		image {
			@include wd(64rpx);
		}
		text {
			font-size: 24rpx;
			margin-top: 12rpx;
		}
	}
}

.good {
	.good-header {
		background: #f9f9f9;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: $pc;
		font-size: 32rpx;
		font-weight: 500;
	}
	.good-box {
		display: flex;
		flex-wrap: wrap;
		.good-skeleton {
			margin: 40rpx 0;
		}
		.good-item {
			box-sizing: border-box;
			width: 50%;
			border-bottom: 2rpx solid #e9e9e9;
			padding: 20rpx;
			image {
				display: block;
				margin: 0 auto;
				width: 240rpx;
				height: 240rpx;
			}
			.good-desc {
				font-size: 28rpx;
				padding: 20rpx 0;
				text-align: center;
				.title {
					color: #222333;
				}
				.price {
					color: $pc;
				}
			}
			&:nth-child(2n + 1) {
				border-right: 2rpx solid #e9e9e9;
			}
		}
	}
}
</style>
